<template>
	<!-- 手机号输入框 -->
	<view class="phonetext">
		<input type="text" v-model="mobile" placeholder="请输入手机号" />
	</view>
	<!-- 登录按钮 -->
	<button @click="login">登录</button>

	<!-- 获取订单信息 -->
	<view v-if="isLogged">接口返回的数据</view>
	<view class="huoqudingdan" v-for="(item, index) in orders" :key="index" v-if="isLogged">
		<view>{{ item }}</view>
	</view>
	<!-- 登录信息 -->
	<view v-if="logins.length > 0">用户信息：</view>
	<view v-for="(value, key) in logins" :key="key" class="login-info">
		<view>{{ key }}: {{ value }}</view>
	</view>

	<button @click="viewOrders">查看订单</button>
	<!-- 获取商品 -->
	<view>获取商品</view>
	<view class="shop">
		<view v-for="(item, index) in shops" :key="index" class="shopbox">
			<image class="shopimg" :src="item.brand_logo"></image>
			<view class="shopname">{{ item.brand_name }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shops: [],
				orders: [],
				logins: [],
				mobile: '', // 用于存储手机号的数据属性
				isLogged: false, // 用户登录状态
			};
		},
		mounted() {
			this.getShop();
		},
		methods: {
			getShop() {
				this.$myRequest({
					url: 'index/getJdPddBrand',
					method: 'POST',
					contentType: 'application/x-www-form-urlencoded',
					data: {
						cate_id: '1',
						source_type: 'pdd',
					},
				}).then(response => {
					if (response && response.data) {
						this.shops = response.data.data;
						console.log(response.data);
					} else {
						console.error('没有收到返回的数据:', response);
					}
				}).catch(err => {
					console.error('请求失败:', err);
				});
			},
			getOrder() {
				this.$myRequest({
					url: 'User/userUpdateOrder',
					method: 'POST',
					contentType: 'multipart/form-data',
					data: {},
				}).then(response => {
					if (response && response.data) {
						if (response.data.code === 'relogin') {
							this.isLogged = false;
							this.orders = [];
							uni.showToast({
								title: '请重新登录',
								icon: 'none',
							});
						} else {
							this.orders = response.data.data || [];
							console.log(response.data);
						}
					} else {
						console.error('没有收到返回的数据:', response);
					}
				}).catch(err => {
					console.error('请求失败:', err);
				});
			},
			login() {
				this.$myRequest({
					url: 'Login/bindphone',
					method: 'POST',
					contentType: 'multipart/form-data',
					data: {
						login_devid: '',
						admin_userid: '1',
						appid: '',
						mobile: this.mobile,
					},
				}).then(response => {
					if (response && response.data) {
						if (response.data.code === 1 && response.data.logined === 1) {
							this.logins = response.data.data;
							this.isLogged = true;
							this.getOrder(); // 登录成功后获取订单信息
							console.log('用户登录信息:', response.data.data);
						} else {
							console.log('未登录');
						}
					} else {
						console.error('没有收到返回的数据:', response);
					}
				}).catch(err => {
					console.error('请求失败:', err);
				});
			},
			viewOrders() {
				if (this.isLogged) {
					// 跳转到订单页面
					uni.navigateTo({
						url: '/pages/CirclePage/CirclePage' 
					});
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
					});
				}
			},
		},
	};
</script>

<style>
	.phonetext {
		width: 90%;
		padding: 2%;
	}

	.shop {
		padding: 2%;
		display: flex;
		flex-wrap: wrap;
		gap: 2%;
	}

	.shopbox {
		width: 48%;
	}

	.shopname {
		font-size: 15px;
		text-align: center;
	}

	.shopimg {
		width: 100%;
		height: 150px;
	}

	.huoqudingdan {
		margin-top: 10px;
	}

	.login-info {
		margin-top: 5px;
	}

	input[type="text"] {
		width: 100%;
		padding: 10px;
		margin: 10px 0;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	button {
		background-color: #007aff;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		width: 90%;
	}
</style>
